<template>
    <div>
        <div class="count">
        <h2>当前计数：{{count}}</h2>
        <h2>doubleCount: {{doubleCount}}</h2>
        <select v-model.number="selectValue">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
        <button @click="add">+1</button>
        <button @click="sub">-1</button>
        <button @click="multi">*2</button>
        <h2>{{ name }} - {{ address }}</h2>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {ref,toRefs} from 'vue'
import { useCountStore } from '@/store/count'
import { storeToRefs } from 'pinia'

// 从store中获取count
const countStore = useCountStore()
// 使用 storeToRefs 解构出count ，storeToRefs 只关注pinia中的数据，不会关注vuex中的数据
// storeToRefs 会将pinia中的数据转换为ref，但是不会将方法转换为ref
const { count,name,address,doubleCount } = storeToRefs(countStore)

// 获取select选中的值
const selectValue = ref(1)
const add = () => {
  // 第一种修改pinia中的数据方式，直接修改
  // countStore.count += selectValue.value
  // countStore.name = '北京'
  // countStore.address = '海淀区'
  // 第二种修改pinia中的数据方式，使用$patch
  // 注意：$patch只能修改pinia中的数据，不能修改vuex中的数据
  // 与第一种方式相比，$patch可以同时修改多个数据
  // countStore.$patch({
  //   count: countStore.count + selectValue.value,
  //   name: '北京' + selectValue.value,
  //   address: '海淀区' + selectValue.value
  // })
  // 第三种修改pinia中的数据方式，使用actions
  // actions中的方法可以修改pinia中的数据，也可以修改vuex中的数据
  // actions中的方法可以异步修改pinia中的数据，也可以同步修改pinia中的数据
  // actions中的方法可以接收参数，也可以不接收参数
  // actions中的方法可以返回值，也可以不返回值
  // actions中的方法可以在组件中使用，也可以在组件外使用
  // actions中的方法可以在组件中使用，也可以在组件外使用
  countStore.increment(selectValue.value)
}
const multi =()=>{
  
}

const sub = () => {
  countStore.count -= selectValue.value
}

</script>

<style scoped>
.count{
  margin-top: 20px;
  background-color: aliceblue;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
</style>